<template>
  
  <el-card class="job-card">
    <div class="card-header">
      <div class="job-title">{{ jobData.title }}</div>
      <div class="job-salary">{{ jobData.salaryL }}-{{ jobData.salaryR }}K</div>
    </div>

    <div class="card-details">
      <el-tag type="info" class="tag">{{ jobData.city }}</el-tag>
      <el-tag type="info" class="tag">{{ get() }}</el-tag>
      <el-tag type="info" class="tag">{{ get() }}</el-tag>
    </div>

    <div class="card-footer">
      <div class="company-name">{{ jobData.company_name }}</div>
    </div>
  </el-card>
  
</template>

<script>
export default {
  name: "JobCard",
  props: {
    jobData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      cats: ['技术开发', '产品经理', '设计师', '市场专员', '数据分析师', 'UI/UX设计', '运营管理', '销售代表']
    };
  },
  methods: {
    // 随机选择一个标签
    get() {
      const randomIndex = Math.floor(Math.random() * this.cats.length);
      return this.cats[randomIndex];
    }
  }
};
</script>

<style scoped>
.job-card {
  width: 350px;
  border: 1px solid #f0f0f0;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.job-salary {
  color: #f56c6c;
}

.card-details {
  margin-bottom: 10px;
}

.tag {
  margin-right: 5px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.company-name {
  display: flex;
  align-items: center;
}

.company-logo {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
}
</style>
